@import "./pytch-variables.scss";

$block-category-backgrounds: (
  "motion": #4797ff,
  "looks": #9966ff,
  "sound": #d65cd6,
  "events": #ffd500,
  "control": #ffab19,
  "sensing": #4cbfe6,
  "operators": #40bf4a,
  "variables": #ff8c1a,
  "lists": #ff661a,
  "instances": #4d97ff,
);

$hovered-method-bg: darken($secondary-bg-color, 5);

.help-sidebar {
  .content-wrapper > .content {
    width: $help-sidebar-content-width;
    .inner-content {
      margin: 0.75rem;
      margin-bottom: 7.5rem;
    }
  }
}

.ActivityContent .HelpSidebar .content .inner-content,
.help-sidebar .content .inner-content {
  .HelpSidebarSection {
    > div:last-child {
      margin-bottom: 2rem;
    }

    h1 {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;

      color: white;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      transition-property: background-color;
      transition-duration: 150ms;

      .content {
        padding: 0.5rem;
        font-size: 1.125rem;
        font-weight: 500;
      }

      .accordion-signifier {
        display: grid;
        margin-right: 0.5rem;
        font-size: 1.25rem;
      }
    }
  }

  @each $cat, $bg in $block-category-backgrounds {
    .HelpSidebarSection.category-#{$cat} {
      h1 {
        background-color: $bg;
        &:hover {
          background-color: darken($bg, 15);
        }
      }
    }
  }

  h2 {
    font-size: 0.925rem;
    font-weight: bold;

    &.has-python {
      display: grid;
      grid-template-columns: auto 1fr;
      justify-items: right;
    }
    &.non-method {
      font-size: 1.125rem;
    }
  }

  .pytch-method {
    margin-top: 1.25rem;
    margin-left: -6px;
    margin-right: -6px;
    background-color: $secondary-bg-color;
    border: 6px solid transparent;

    &:hover {
      background-color: $hovered-method-bg;

      pre,
      code {
        background-color: $hovered-method-bg;
      }
    }

    h2 code {
      /* Counteract border */
      margin-left: -4px;
    }

    .help-text {
      &.hidden {
        display: none;
      }
      margin-top: 0.75rem;
    }

    .help-sidebar-button {
      font-size: 0.8rem;
      display: grid;
      grid-template-columns: auto auto;
      justify-items: center;
      align-items: center;
      padding: 2px 8px;

      > *:first-child {
        margin-right: 0.5rem;
      }
    }

    .python-with-buttons,
    .scratch-with-buttons {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;

      &.long {
        flex-direction: column;
        align-items: flex-start;
        button {
          margin-top: 0.5rem;
          align-self: flex-end;
        }
      }

      margin-top: 0.25rem;
    }

    svg.scratchblocks {
      margin: 0px;
    }

    .python {
      margin-top: 0.75rem;
    }
  }

  em {
    padding-right: 0.1667rem;
  }

  pre,
  code {
    padding: 4px;
    color: black;
  }

  pre > code {
    padding: 0px;
    &.comment {
      color: #333;
      font-style: italic;
    }
  }
}
